<template>
    <div>
        <van-popup v-model="showSku.status" round position="bottom" :style="{ height: '60%' }">
            <van-cell>
                <van-card
                >
                    <template #thumb>
                        <van-image :src="baseAttr[0].spuBaseAttrs[0].skuImg"
                                   style="width:100px;position: relative;right:10px;">
                        </van-image>
                    </template>
                    <template #desc>
                        <br/>
                        已选规格:
                    </template>
                    <template #price>
                        <span style="font-size:20px;font-weight: bold;color: red;position: relative;right:8px">￥<span
                                v-text="baseAttr[0].spuBaseAttrs[0].price"></span></span>
                    </template>
                </van-card>
                <div v-for="(item,index) in baseAttr">
                    <van-cell>
                        <template #title>
                            <span style="font-weight: bold">
                                {{item.attrName}}
                            </span>
                        </template>
                    </van-cell>
                    <div>
                        <span v-for="(sku,index) in item.spuBaseAttrs">
                            <van-button round type="info"
                                        style="font-size: 10px;width:80px;height: 30px;margin-left: 10px"
                                        color="#f2f2f2">
                                <span style="color: black">
                                    {{sku.attrValue}}
                                </span>
                            </van-button>
                        </span>
                    </div>
                </div>
            </van-cell>
        </van-popup>
    </div>
</template>

<script>
    export default {
        props: ["showSku"],
        data() {
            return {
                baseAttr: [],
                currentSku:[]
            };
        },
        created() {
            this.getSku();
        },
        methods: {
            getSku() {
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/spuAttr/findByKindsId",
                    params: {
                        spuId: 19,
                        kindsId: 1
                    }
                }).then(result => {
                    this.baseAttr = result.data;
                    console.log(this.baseAttr)
                })
            },
            skuChange() {

            },
            onBuyClicked(data) {
                this.$toast('buy:' + JSON.stringify(data));
                console.log(JSON.stringify(data))
            },
            onAddCartClicked(data) {
                this.$toast('add cart:' + JSON.stringify(data));
            },
        }
    };
</script>

<style lang="less">
    .demo-sku {
        .sku-container {
            padding: 0 15px;
        }
    }

    .van-card {
        width: 100%;
        height: 230px;
    }

    /deep/ .van-button van-button--info van-button--normal van-button--round {
        color: black;
    }
</style>
